<template>
	<view>
		<back :showBackText="false" :customClass="isNightMode ? 'bg-black text-white' : 'bg-gradual-blue text-white'" :title="title"></back>
		<view :style="isNightMode ? 'background-color: gray;':''">
			<view class="nav text-center top" :style="cssData.questionModelCss">
				<view class="cu-item" :class="index==selectModelIndex?'text-blue cur':''"
					v-for="(item,index) in selectModel" :key="index" @tap="selectModelTap" :data-id="index">
					{{item}}
				</view>
			</view>
			<swiper @transition="transitionTap" @animationfinish="animationfinishTap" :current="swiperCurrent"
				:style="'height:calc(100vh - ' + CustomBar + 'px - 120px)'">
				<swiper-item :skip-hidden-item-layout="true" v-for="(item, index) in listData" :key="index">
					<scroll-view scrollY="true" :style="'height:calc(100vh - ' + CustomBar + 'px - 120px)'">

						<view :style="cssData.questionTypeTagAndTitleCss">
							<!--题目类型和题目序号-->
							<view class="questionAsk-layout  margin-top-xs" :style="cssData.questionTypeTagAndTitleCss">
								<view class="cu-capsule radius margin">
									<view class='cu-tag' :style="cssData.questionTypeTagTypeCss">
										{{ currentTopicTypeLabel }}
									</view>
									<view class="cu-tag line-blue" :style="cssData.questionTypeTagCss">
										【第{{currentPage}}页，共{{listData.length}}道题，第{{swiperCurrent + 1}}道题】
									</view>
								</view>
							</view>
							<view v-if="backgroundData[item.background_id]">
								<view class="questionAsk-layout margin-top-xs">
									<view class="margin-top margin-left margin-right margin-bottom-xs"
										:style="cssData.questionContentCss">
										<rich-text :nodes="backgroundData[item.background_id]">
										</rich-text>
									</view>
								</view>
							</view>

							<!--题目标题-->
							<view class="questionAsk-layout"
								:class="[isNightMode==true ? 'bg-black text-gray' :'bg-white']"
								style="padding:0rpx 30rpx 30rpx 30rpx;" :style="cssData.questionContentCss">
								<view :class="backgroundData[item.background_id] ? 'margin-top':''">
									<rich-text @longpress="onLongPress(item.questionAsk)" :nodes="item.questionAsk">
									</rich-text>
								</view>
								<view class="nosupport" v-if="!curretnAnwer">本题暂不支持作答</view>
							</view>
						</view>

						<view class="options-layout margin-top-xs" v-if="item.type == 1 || item.type == 3"
							:style="cssData.questionContentCss">
							<view @tap="singleSelectTap" :class="
			                            (item.select_answer == 'A'
			                                ? item.is_correct == 1
			                                    ? 'layout-result-correct'
			                                    : 'layout-result-error'
			                                : item.correctOption == 'A'
			                                ? item.select_answer && item.is_correct == 2
			                                    ? 'layout-result-correct'
			                                    : ''
			                                : '') + ' layout-result'
			                        " data-answer="A" v-if="item.A">
								<text>A</text>
								<rich-text @longpress="onLongPress(item.A)" :nodes="item.A"></rich-text>
							</view>
							<view @tap="singleSelectTap" :class="
			                            (item.select_answer == 'B'
			                                ? item.is_correct == 1
			                                    ? 'layout-result-correct'
			                                    : 'layout-result-error'
			                                : item.correctOption == 'B'
			                                ? item.select_answer && item.is_correct == 2
			                                    ? 'layout-result-correct'
			                                    : ''
			                                : '') + ' layout-result'
			                        " data-answer="B" v-if="item.B">
								<text>B</text>
								<rich-text @longpress="onLongPress(item.B)" :nodes="item.B"></rich-text>
							</view>
							<view @tap="singleSelectTap" :class="
			                            (item.select_answer == 'C'
			                                ? item.is_correct == 1
			                                    ? 'layout-result-correct'
			                                    : 'layout-result-error'
			                                : item.correctOption == 'C'
			                                ? item.select_answer && item.is_correct == 2
			                                    ? 'layout-result-correct'
			                                    : ''
			                                : '') + ' layout-result'
			                        " data-answer="C" v-if="item.C">
								<text>C</text>
								<rich-text @longpress="onLongPress(item.C)" :nodes="item.C"></rich-text>
							</view>
							<view @tap="singleSelectTap" :class="
			                            (item.select_answer == 'D'
			                                ? item.is_correct == 1
			                                    ? 'layout-result-correct'
			                                    : 'layout-result-error'
			                                : item.correctOption == 'D'
			                                ? item.select_answer && item.is_correct == 2
			                                    ? 'layout-result-correct'
			                                    : ''
			                                : '') + ' layout-result'
			                        " data-answer="D" v-if="item.D">
								<text>D</text>
								<rich-text @longpress="onLongPress(item.D)" :nodes="item.D"></rich-text>
							</view>
							<view @tap="singleSelectTap" :class="
			                            (item.select_answer == 'E'
			                                ? item.is_correct == 1
			                                    ? 'layout-result-correct'
			                                    : 'layout-result-error'
			                                : item.correctOption == 'E'
			                                ? item.select_answer && item.is_correct == 2
			                                    ? 'layout-result-correct'
			                                    : ''
			                                : '') + ' layout-result'
			                        " data-answer="E" v-if="item.E">
								<text>E</text>
								<rich-text @longpress="onLongPress(item.E)" :nodes="item.E"></rich-text>
							</view>
							<view @tap="singleSelectTap" :class="
			                            (item.select_answer == 'F'
			                                ? item.is_correct == 1
			                                    ? 'layout-result-correct'
			                                    : 'layout-result-error'
			                                : item.correctOption == 'F'
			                                ? item.select_answer && item.is_correct == 2
			                                    ? 'layout-result-correct'
			                                    : ''
			                                : '') + ' layout-result'
			                        " data-answer="F" v-if="item.F">
								<text>F</text>
								<rich-text @longpress="onLongPress(item.F)" :nodes="item.F"></rich-text>
							</view>
						</view>
						<view class="options-layout margin-top-xs" v-else-if="item.type == 2"
							:style="cssData.questionContentCss">
							<view @tap="multipleSelectTap" :class="
			                            (item.is_correct == 0
			                                ? item.select_answer.indexOf('A') != -1
			                                    ? 'layout-result-select'
			                                    : ''
			                                : item.is_correct == 1
			                                ? item.select_answer.indexOf('A') != -1  && item.correctOptionArr.indexOf('A') != -1
			                                    ? 'layout-result-correct'
			                                    : ''
			                                : item.select_answer.indexOf('A') != -1
			                                ? item.select_answer.indexOf('A') != -1  && item.correctOptionArr.indexOf('A') != -1
			                                    ? 'layout-result-correct'
			                                    : 'layout-result-error'
			                                : '') + ' layout-result'
			                        " data-index="0" v-if="item.A">
								<text>A</text>
								<rich-text @longpress="onLongPress(item.A)" :nodes="item.A"></rich-text>
							</view>
							<view @tap="multipleSelectTap" :class="
			                            (item.is_correct == 0
			                                ? item.select_answer.indexOf('B') != -1
			                                    ? 'layout-result-select'
			                                    : ''
			                                : item.is_correct == 1
			                                ? item.select_answer.indexOf('B') != -1  && item.correctOptionArr.indexOf('B') != -1
			                                    ? 'layout-result-correct'
			                                    : ''
			                                : item.select_answer.indexOf('B') != -1
			                                ? item.select_answer.indexOf('B') != -1  && item.correctOptionArr.indexOf('B') != -1
			                                    ? 'layout-result-correct'
			                                    : 'layout-result-error'
			                                : '') + ' layout-result'
			                        " data-index="1" v-if="item.B">
								<text>B</text>
								<rich-text @longpress="onLongPress(item.B)" :nodes="item.B"></rich-text>
							</view>
							<view @tap="multipleSelectTap" :class="
			                            (item.is_correct == 0
			                                ? item.select_answer.indexOf('C') != -1
			                                    ? 'layout-result-select'
			                                    : ''
			                                : item.is_correct == 1
			                                ? item.select_answer.indexOf('C') != -1  && item.correctOptionArr.indexOf('C') != -1
			                                    ? 'layout-result-correct'
			                                    : ''
			                                : item.select_answer.indexOf('C') != -1
			                                ? item.select_answer.indexOf('C') != -1  && item.correctOptionArr.indexOf('C') != -1
			                                    ? 'layout-result-correct'
			                                    : 'layout-result-error'
			                                : '') + ' layout-result'
			                        " data-index="2" v-if="item.C">
								<text>C</text>
								<rich-text @longpress="onLongPress(item.C)" :nodes="item.C"></rich-text>
							</view>
							<view @tap="multipleSelectTap" :class="
			                            (item.is_correct == 0
			                                ? item.select_answer.indexOf('D') != -1
			                                    ? 'layout-result-select'
			                                    : ''
			                                : item.is_correct == 1
			                                ? item.select_answer.indexOf('D') != -1  && item.correctOptionArr.indexOf('D') != -1
			                                    ? 'layout-result-correct'
			                                    : ''
			                                : item.select_answer.indexOf('D') != -1
			                                ? item.select_answer.indexOf('D') != -1  && item.correctOptionArr.indexOf('D') != -1
			                                    ? 'layout-result-correct'
			                                    : 'layout-result-error'
			                                : '') + ' layout-result'
			                        " data-index="3" v-if="item.D">
								<text>D</text>
								<rich-text @longpress="onLongPress(item.D)" :nodes="item.D"></rich-text>
							</view>
							<view @tap="multipleSelectTap" :class="
			                            (item.is_correct == 0
			                                ? item.select_answer.indexOf('E') != -1
			                                    ? 'layout-result-select'
			                                    : ''
			                                : item.is_correct == 1
			                                ? item.select_answer.indexOf('E') != -1  && item.correctOptionArr.indexOf('E') != -1
			                                    ? 'layout-result-correct'
			                                    : ''
			                                : item.select_answer.indexOf('E') != -1
			                                ? item.select_answer.indexOf('E') != -1  && item.correctOptionArr.indexOf('E') != -1
			                                    ? 'layout-result-correct'
			                                    : 'layout-result-error'
			                                : '') + ' layout-result'
			                        " data-index="4" v-if="item.E">
								<text>E</text>
								<rich-text @longpress="onLongPress(item.E)" :nodes="item.E"></rich-text>
							</view>
							<view @tap="multipleSelectTap" :class="
			                            (item.is_correct == 0
			                                ? item.select_answer.indexOf('F') != -1
			                                    ? 'layout-result-select'
			                                    : ''
			                                : item.is_correct == 1
			                                ? item.select_answer.indexOf('F') != -1  && item.correctOptionArr.indexOf('F') != -1
			                                    ? 'layout-result-correct'
			                                    : ''
			                                : item.select_answer.indexOf('F') != -1
			                                ? item.select_answer.indexOf('F') != -1  && item.correctOptionArr.indexOf('F') != -1
			                                    ? 'layout-result-correct'
			                                    : 'layout-result-error'
			                                : '') + ' layout-result'
			                        " data-index="5" v-if="item.F">
								<text>F</text>
								<rich-text @longpress="onLongPress(item.F)" :nodes="item.F"></rich-text>
							</view>
							<view @tap="multipleSelectCommitTap" class="text-submit" :style="cssData.questionCommitCss"
								v-if="item.is_correct == 0">提交
							</view>
						</view>
						<view class="padding flex flex-direction" v-if="item.question_images.length > 0">
							<button @tap="openQuestionImagesTap" class="cu-btn  bg-blue"><text class="cuIcon-picfill"
									style="margin-right: 10rpx;"></text>查看题目中的图片</button>
						</view>
						<view :style="cssData.questionAnswerCss" class="margin-buttom-xs">
							<view class="explain-layout margin-top-xs" v-if="!curretnAnwer || item.is_correct >= 1">
								<view class="cu-bar bg-white" :style="cssData.questionOtherTitleCss">
									<view class="action" style="margin-left: 0;">
										<text class="cuIcon-titles text-blue" style="margin-right: 0;"></text> <text
											class=" text-black">答案</text>
									</view>
								</view>

								<view style="display: flex">
									<view class="explain-answer" :style="cssData.questionContentCss">
										<view v-if="item.type == 1 || item.type == 2 || item.type == 3">参考答案</view>
										<rich-text @longpress="onLongPress(item.correctOption)"
											:class="item.type == 1 || item.type == 2 || item.type == 3 ? 'correct' : 'answer'"
											:nodes="item.correctOption"></rich-text>
									</view>
									<view class="explain-answer margin-left" :style="cssData.questionContentCss"
										v-if="item.type == 1 || item.type == 2 || item.type == 3">
										<view>您的答案</view>
										<rich-text :class="item.is_correct == 1 ? 'correct' : 'error'"
											:nodes="!item.originSelect ? item.select_answer : item.originSelect">
										</rich-text>
									</view>
								</view>
								<view class="cu-bar bg-white" :style="cssData.questionOtherTitleCss">
									<view class="action" style="margin-left: 0;">
										<text class="cuIcon-titles text-blue" style="margin-right: 0;"></text> <text
											class=" text-black">本题解析</text>
									</view>
									<view class="action">
										<button class="cu-btn bg-orange round shadow"
											@tap="aiExplanationTap(true)"><text class="cuIcon-new"
												style="padding-right: 2px;"></text> AI解题</button>
									</view>
								</view>
								<rich-text @longpress="onLongPress(item.explanation)" class="explain-text"
									:style="cssData.questionContentCss" :nodes="item.explanation"
									v-if="item.explanation">
								</rich-text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
			<view class="cu-modal bottom-modal" :class="openAiExplanationModal==true  ?'show':''"
				@tap="aiExplanationTap(false)">
				<view class="cu-dialog" @tap.stop="">
					<view class="cu-bar bg-white justify-end">
						<view class="content">
							<text class="text-blod text-black">AI解题</text>
						</view>
					</view>
					<view class="padding-xl" style="padding: 30rpx;text-align: left;">
						<rich-text @longpress="onLongPress(aiExplanationContent)" :nodes="aiExplanationContent">
						</rich-text>
					</view>
				</view>
			</view>
			<view class="cu-modal bottom-modal " :class="[openSetModal==true ?'show':'']" @tap="onCloseSetTap">
				<view class="cu-dialog" @tap.stop="">
					<view class="cu-bar" :style="cssData.setDialogCommitCss" style="display: none;">
						<view class="action text-blue" @tap="onCloseSetTap"></view>
						<view class="action text-gray" @tap="onCloseSetTap" style="display: none;"><text
								class="cuIcon-close"></text></view>
					</view>
					<scroll-view scroll-x class="bg-white nav">
						<view class="flex text-center">
							<view class="cu-item flex-sub" :class="index==moreActionNavIndex?'text-orange cur':''"
								v-for="(item,index) in moreActionNavList" :key="index" @tap="moreActionIndexTap"
								:data-index="index">
								{{item}}
							</view>
						</view>
					</scroll-view>
					<view>
						<view v-if="moreActionNavIndex==0" class="margin">
							<view class="padding flex flex-wrap justify-between align-center bg-white">
								<button class="cu-btn round" @tap="onCollectTap"
									:style="cssData.questionFootTabItemCss"><text class="cuIcon-likefill"></text>
									{{isCollection==1 ? '取消收藏':'收藏题目'}}</button>
								<button class="cu-btn round " @tap="onFeedbackTap"
									:style="cssData.questionFootTabItemCss"><text class="cuIcon-warnfill"></text>
									题目纠错</button>
								<button class="cu-btn round " open-type="share"
									:style="cssData.questionFootTabItemCss"><text class="cuIcon-forwardfill"></text>
									分享题目</button>

							</view>
							<view class="padding flex flex-wrap justify-around bg-white" style="padding-top:0px ;">
								<button class="cu-btn round " @tap="onCleanErrorQuestionTap"
									:style="cssData.questionFootTabItemCss"><text class="cuIcon-deletefill"></text>
									清空错题</button>
								<button class="cu-btn round " @tap="onCleanQuestionTap"
										:style="cssData.questionFootTabItemCss"><text class="cuIcon-warnfill"></text>
										重置记录</button>
							</view>
						</view>
						<view v-if="moreActionNavIndex==1" class="margin">
							<view class="cu-form-group" :style="cssData.setDialogSwitchCss">
								<view class="title">答题后自动跳转下一题</view>
								<switch @change.stop="autoNextTap" :class="isAutoNext?'checked':''"
									:checked="isAutoNext">
								</switch>
							</view>
							<view class="cu-form-group" :style="cssData.setDialogSwitchCss">
								<view class="title">答题正确后自动跳转下一题</view>
								<switch class="" @change.stop="autoCorrectNextTap"
									:class="isAutoCorrectNext?'checked':''" :checked="isAutoCorrectNext"></switch>
							</view>
						</view>
						<view v-if="moreActionNavIndex==2" class="margin">
							<view class="cu-form-group" :style="cssData.setDialogSwitchCss">
								<view class="title">夜间模式</view>
								<switch class="" @change.stop="nightModeTap" :class="isNightMode?'checked':''"
									:checked="isNightMode"></switch>
							</view>
							<view class="cu-form-group" :style="cssData.setDialogSwitchCss">
								<view class="title">字体大小</view>
								<radio-group @change.stop="setQuestionFontTap">
									<label class="margin-left-sm" v-for="(item,index) in selectFontList" :key="index"
										:data-id="index">
										<radio class="green radio" :value="item.value"
											:checked="item.value==questionFont ? true:false"></radio>
										<text style="margin-left: 16rpx;"
											:style="'font-size:'+(item.value)">{{item.name}}</text>
									</label>
								</radio-group>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom-layout cu-bar tabbar" :class="isNightMode ? 'bg-black':'bg-white'" 
				:style="{
					position: 'fixed',
					bottom: 0,
					left: 0,
					right: 0,
					zIndex: 99,
					backgroundColor: isNightMode ? '#000000' : '#ffffff',
					boxShadow: '0 -2rpx 6rpx rgba(0, 0, 0, 0.1)',
					borderTop: '1rpx solid #eee'
				}">
				<view class="action" :style="cssData.questionFootTabItemCss">
					<picker @change="pageSelectChange" :value="currentPage - 1" :range="pageSelectList">
						<view class="cuIcon-radioboxfill"></view>
						第{{ currentPage }}/{{ maxPage }}页
					</picker>
				</view>
				<view class="action" @tap="setQuestionDirectionTap(1)" :style="cssData.questionFootTabItemCss">
					<view class="cuIcon-roundleftfill-copy"></view>上一题
				</view>
				<view class="action text-blue add-action" @tap="commitTap" :style="cssData.questionFootTabItemCss">
					<button class="cu-btn cuIcon-write shadow"
						:class="isNightMode ? 'bg-grey':'bg-gradual-blue'"></button>
					保存
				</view>
				<view class="action text-blue" @tap="setQuestionDirectionTap(2)" data-type="2"
					:style="cssData.questionFootTabItemCss">
					<view class="cuIcon-roundrightfill"></view>下一题
				</view>
				<view class="action text-blue" @tap="onOpenSetTap" :style="cssData.questionFootTabItemCss">
					<view class="cuIcon-usefullfill"></view>
					操作
				</view>
			</view>
		</view>
	</view>
</template>
<style src="./practice.css"></style>
<script src="./practice.js"></script>